<template>
  <div class="cartBox">
    <div class="allBox">
      <van-checkbox :value="all" @change="onChangeAll" checked-color="#07c160">极速达</van-checkbox>
    </div>
    <div class="listBox" v-for='(item,index) in cartList' :key='index'>
      <div class="checkBox">
        <van-checkbox :value="item.isChecked" @change="onChangeOne($event,item)" checked-color="#07c160">极速达</van-checkbox>
      </div>
      <div class="goodsBox">
        <div class="imgBox">
          <img :src="item.img" alt="">
        </div>
        <div class="textBox">
          <div class="title">{{item.title}}</div>
          <div class="price_count">
            <div class="price">￥{{item.price}}</div>
            <van-stepper :value="item.count" @change="onChangeCount($event,item)" />
          </div>
        </div>
      </div>
    </div>

    <div class="bot">
      <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      all: true,
      cartList: [],
      total: 0
    };
  },

  methods: {
    onChangeAll(e) {
      this.all = e.mp.detail;
      this.cartList.every(item => (item.isChecked = this.all));
      this.getTotal();
    },
    onChangeOne(e, item) {
      item.isChecked = e.mp.detail;
      this.all = this.cartList.every(item => item.isChecked);
      this.getTotal();
    },
    onChangeCount(e, item) {
      item.count = e.mp.detail;
      this.getTotal();
    },
    getTotal() {
      this.total = this.cartList.reduce((prev, next) => {
        if (next.isChecked) {
          return prev + next.price * next.count * 100;
        } else {
          return prev;
        }
      }, 0);
    },
    onSubmit() {}
  },
  onShow() {
    let app = getApp();
    this.cartList = app.globalData.cartList || [];
    this.getTotal();
  }
};
</script>

<style lang='less'>
.cartBox {
  padding: 10px;
  .listBox {
    display: flex;
    padding: 10px 0;
    .checkBox {
      width: 25px;
      display: flex;
      align-items: center;
    }
    .goodsBox {
      flex: auto;
      display: flex;
      .imgBox {
        width: 100px;
        height: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .textBox {
        flex: auto;
        padding-left: 5px;
      }
    }
  }
  .bot {
    position: fixed;
    bottom: 0;
  }
}
</style>
